<template>
	<view class="bodyView" :data-theme="dataTheme">
		<view class="personalView">
			<text>Profile</text>
			<view class="header" @click="navToSet">
				<view class="avart">
					<image class="avartImg" src="@/static/icons/avart.png" mode=""></image>
				</view>
				<view class="setIcon">
					<uni-icons   type="gear" color="#e18092" size="26"></uni-icons>
				</view>
				
			</view>
			
			 
			<view class="name"> {{userInfo.phone}}</view>
			<view class="set" v-if="userInfo?.role=='admin'">
				<view class="label">管理</view>
				<view class="option" @click="naveToMap">
					<view>
						订单分布
					</view>
					<uni-icons type="map-filled" color="#e18092" size="26"></uni-icons>
				
				</view>
			</view>
			<!-- <view class="set">
				<view class="label">主题</view>
				<view class="option" @click="changeTheme('dark')">
					<view>
						深色(dark)
					</view>
					<image :class="{checkIcon:true,active:dataTheme=='dark'}" src="@/static/icons/check.png" mode="">
					</image>
				</view>
				<view class="option" @click="changeTheme('light')">
					<view>
						浅色(light)
					</view>
					<image :class="{checkIcon:true,active:dataTheme=='light'}" src="@/static/icons/check.png" mode="">
					</image>
				</view>
			</view> -->
			
			<view class="set">
				<view class="label">订单</view>
				<view class="option pro" v-for="item,index in myOrders" :key="`order${index}`">
					<view class="producs">
						<view v-for="detail in item.producJson" class="producImg" @click="showProduc(detail.id)"
						:style="`background-image:url(./static/cake/${detail.image});`"> </view>
					</view>
					<view class="bottomInfo">
						<view class="left">
							{{parseTime(new Date(item.dateTime))}}
						</view>
						<view class="right">
							${{item.money}}
						</view>
					</view>
					
				</view>
				
			</view>

			
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted, watch
	} from 'vue';
	import { 
		parseTime
	} from "@/utils/tool.js"
	import useSystemStore from '@/store/modules/system'
	const systemStore = useSystemStore()
	const {
		dataTheme,
		myOrders,
		userInfo
	} = storeToRefs(systemStore);
	 



	//路由到设置
	let navToSet=()=>{
		uni.navigateTo({
			url:'/pages_sub/set/index'
		})
	}
	//显示产品详情
	let showProduc = (id) => {
		uni.$emit('showProDetail', id)
	}
	//跳转路由到地图
	let naveToMap=()=>{
		uni.navigateTo({
			url:'/pages/map/index'
		})
	}
	
	onMounted(() => {
		  
	})
</script>

<style lang="scss" scoped>
	.bodyView {
		width: 100vw;
		height: 100%;
	}

	.personalView {
		box-sizing: border-box;
		width: 100vw;
		height: 100%;
		padding: 0 $mainPadding;
		overflow-y: auto;
		overflow-x: hidden;
		@include flex-teng(column, flex-start);
		
		.header{
			position: relative;
			.setIcon{
				position: absolute;
				bottom: 0;
				right: 0;
				transform: translate(30%,0);
				@include flex-teng;
				width: 26px;
				height: 26px;
				border-radius: 50%;
				@include useTheme {
					background-color: getValue('textColor'); 
				}
			}
			.avart {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-top: $mainPadding;
				 
				@include flex-teng;
			
				@include useTheme {
					background-color: getValue('bottombgColor');
			
				}
			
				.avartImg {
					border-radius: 50%;
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
		
		
		.name{
			margin-top: $mainPadding;
		}

		.set {
			box-sizing: border-box;
			margin-top: $mainPadding;
			padding: $mainPadding 30rpx;
			width: 100%;
			border-radius: 40px;
			//box-shadow:  0 0 1px 0px #a3a3a3;
			//border:1px solid #a3a3a3;
			@include useTheme {
				background-color: getValue('bottombgColor');
			}

			.label {
				font-size: $fontSize;
			}

			.option {
				padding: $mainPadding;
				font-size: $fontSize2;
				border-bottom: 1px solid rgba(143, 143, 143, 0.6);
				@include flex-teng(row, space-between);

				.checkIcon {
					width: 43rpx;
					height: 48rpx;
					transition: all 1.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
					transform: scale(0);
					opacity: 0;

					&.active {
						transform: scale(1);
						opacity: 1;
					}
				}
				
				&.pro{
					flex-direction: column !important;
					row-gap: 10rpx;
				}
				.bottomInfo{
					width: 100%;
					font-size: $fontSize3;
					@include flex-teng(row,space-between);
				}
				.producs{
					width: 100%;
					display: flex;
					overflow: auto;
					column-gap: 10rpx;
					.producImg{
						min-width: 100rpx;
						height: 100rpx;
						border-radius: 20rpx;
						background-size: cover;
					}
				}
			}
		}
	}
</style>